上一篇文章：http://ithelp.ithome.com.tw/question/10157050

根據維基百科的說明：

2004年由Web Hypertext Application Technology Working Group（WHATWG）提出
名為Web Applications 1.0，即是HTML 5草案的前身，再於2007年獲W3C接納並成立了新的HTML工作團隊。

在2008年1月22日第一份正式草案發行。......資料來源 http://zh.wikipedia.org/wiki/HTML5

HTML5新功能如下：

 用來增加文檔的語義結構（semantic structure）的新元素。

 新的表單控制項和內建的驗證功能。

 支援原生（native）的audio和video，這樣用戶就不必依賴於瀏覽器plug-in元件（不用外掛程式）。

 在<canvas>元素和相關的JavaScript API提供了網頁一個自由的區域進行繪製，而JavaScript命令做繪圖，匯入與匯出。

 支援檔案上傳到Web Server。

 支援拖放（dragging and dropping）頁面上的元素。

 當瀏覽器處於離線狀態，仍支援Web應用程序繼續運行。

 支援local data storage，功能面遠超過傳統的Cookie。

==== HTML5文件架構 ====

下圖列出幾個重點：

 <nav>用來作為導覽（navigation）。如下圖最上方，可以經由導覽列連回首頁。建議只放置主要的導覽標題到<nav>裡面。

 <article>表示文章的主體部分，可以獨立展示的Blog文章（或一篇新聞）、網友針對這篇文章的評論、或是分類目錄。

 <section>用來表示文章內容的一部份，以下圖為例，一篇文章裡面有兩個<section>段落。

[img=415,306]http://ithelp.ithome.com.tw/upload/images/20140930/20140930091813542a04d562c31_resize_600.jpg[/img]

==== 可編輯的<article> ====

根據O’REILLY出版的「HTML5 Cookbook」一書的說明，

<artcle>的內容如果允許編輯，請改為<article contenteditable>。

這樣的功能早在IE 5.5就有支援，當初是希望做成「所見即所得（WYSIWYG）」的瀏覽器。

[img=415,234]http://ithelp.ithome.com.tw/upload/images/20140930/20140930091826542a04e231557_resize_600.jpg[/img]

如下圖

在<header>裡面放了兩份標題與導覽 <nav>。

[img=415,342]http://ithelp.ithome.com.tw/upload/images/20140930/20140930091837542a04edc74b7_resize_600.jpg[/img]

在<header>裡面也常見到另一個<hgroup>，用來將表頭標題增加更多訊息。

通常會用<h1>~<h6>來制訂標題文字的大小，<h1>文字最大而<h6>最小。

==== 日期時間 與 圖片 ====

首先介紹日期與時間的<time>

<time datetime="2014-08-08T09:00:00-0500"> 9am today in New York </time>

請搭配ISO（國際標準組織）的日期與時間格式。

再來是圖片的部分，

<figure>代表圖片區塊。

底下會有<figcaption>表示圖片的”標題”。

請注意<figcaption>與<img alt=”圖片取代文字”>兩者的差異。

[img=415,216]http://ithelp.ithome.com.tw/upload/images/20140930/20140930091849542a04f9c6616_resize_600.jpg[/img]

==== details，折疊與隱藏 ====

<details>必須搭配<summary>才能在折疊（隱藏）時，做一個摘要的說明。

不過，IE 11瀏覽器看不到這效果，

我改用 Chrome瀏覽器來觀看。

[img=415,252]http://ithelp.ithome.com.tw/upload/images/20140930/20140930091858542a050274db3_resize_600.jpg[/img]

不要走開，馬上回來

下一篇文章 http://ithelp.ithome.com.tw/question/10157369

===============================================
本系列文章已經集結出書
HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材

MIS2000 Lab. 周棟祥/吳進魯

出版商:碁峰
出版日期：2015-04-09

語言:繁體中文
ISBN:9863475750
ISBN-13:9789863475750

PChome http://24h.pchome.com.tw/books/prod/DJAV0S-A90060ASI
博客來 http://www.books.com.tw/products/0010671214
天瓏書局 https://www.tenlong.com.tw/items/9863475750?item_id=1003110